<template>
  <view class="cart-container">
    <!-- 购物车中有数据的时候 -->
    <view v-if="cartList.length > 0">
      <!-- 收货地址 -->
      <my-address></my-address>
      <view class="cart-title">
        <uni-icons type="shop" size="18"></uni-icons>
        <text class="cart-title-text">购物车</text>
      </view>
      <!-- 左滑可删除商品 -->
      <uni-swipe-action>
        <block v-for="(item, i) in cartList" :key="i">
          <uni-swipe-action-item :right-options="options" @click="onClick(item)">
            <my-goods
              :showRadio='true'
              :showGoodsCount='true'
              :goods='item'
              @radioChange='radioChangeFn'
              @countUpdate='countUpdateFn'
            ></my-goods>
          </uni-swipe-action-item>
        </block>
      </uni-swipe-action>
      <!-- 结算组件 -->
      <my-settle></my-settle>
    </view>
    <view v-else class="noGoods">空空如也~</view>
  </view>
</template>

<script setup>
  import { useCartBadge } from '../../mixins/tabbar-badge.js';
  import { useStore } from 'vuex';
  import { ref, computed } from 'vue';
  import MyGoods from '../../conponents/my-goods/my-goods.vue'; // 组件需要引入
  import MyAddress from '../../conponents/my-address/my-address.vue'; // 组件需要引入
  import MySettle from '../../conponents/my-settle/my-settle.vue'; // 组件需要引入
  
  useCartBadge();
  const store = useStore();
  // 左滑删除配置
  const options = ref([{
    text: '删除',
    style: {
      backgroundColor: '#dd524d'
    }
  }])
  
  const cartList = computed(() => {
    return store.state.cart.cart;
  })

  function radioChangeFn(obj) {
    // 这种写法是不对的，因为没有存储到本地，刷新页面效果就没了
    // let item = cartList.value.find((item) => item.id === obj.id);
    // item.state = obj.state;
    store.commit('cart/updateGoodsState', obj);
  }
  
  function countUpdateFn(obj) {
    store.commit('cart/updateGoodsState', obj);
  }
  // 右滑,点击删除按钮
  function onClick(item) {
    store.commit('cart/removeGoods', item.id);
  }
</script>

<style lang="scss" scoped>
.cart-container {
  padding-bottom: 50px;
}
.cart-title {
  height: 40px;
  display: flex;
  align-items: center;
  font-size: 14px;
  padding-left: 5px;
  border-bottom: 1px solid #efefef;
  .cart-title-text {
    margin-left: 10px;
  }
}
.noGoods {
  height: 150px;
  line-height: 150px;
  text-align: center;
  font-size: 16px;
}
</style>
